/**
 * 卡片3D悬停动画
 * @param {string} selectors 选择器（例：.xxx / #xxx / div）
 * @param {number} maxDeg 最大角度；数值越大倾斜程度越大
 */
function cardAnimation3D(selectors, maxDeg = 24) {
  const cards = document.querySelectorAll(selectors);
  cards.forEach((card) => {
    // 监听鼠标移动事件
    card.onmousemove = function (event) {
      // 获取鼠标在页面中的相对位置
      const rect = card.getBoundingClientRect();
      const mouseX = event.clientX - rect.left;
      const mouseY = event.clientY - rect.top;
      // 计算卡片需要旋转的角度
      const xNum = mouseX - card.offsetWidth / 2;
      const yNum = mouseY - card.offsetHeight / 2;
      const y = xNum > 0 ? "-" : "";
      const x = yNum > 0 ? "" : "-";
      const ydeg = (Math.abs(xNum) / (card.offsetWidth / 2)) * maxDeg;
      const xdeg = (Math.abs(yNum) / (card.offsetHeight / 2)) * maxDeg;
      // 设置卡片旋转的角度;
      card.style.transform = `rotateX(${x}${xdeg}deg) rotateY(${y}${ydeg}deg)`;
    };
    // 监听鼠标移出事件
    card.onmouseleave = function () {
      card.style.transform = "rotate3d(0,0,0,0deg)";
    };
  });
}
